<template>
  <px-scrollbar v-show="drawerType === 'DETAIL'" class="view-equip-detail">
    <div class="flex-row" style="margin-top: 16px">
      <px-button type="primary" icon="back" @click="backMainPage"> 返回 </px-button>
      <h3 class="page-header">
        {{ `${eqpDetailData.eqpId}${eqpDetailData.eqpName}${eqpDetailData.showName ? `（${eqpDetailData.showName}）` : ""}` }}
      </h3>
    </div>
    <CustomTabs :tabList="tabList" :activeName="activeName" @tabSelect="handelTabSelected" />
    <equipBaseInfo v-if="activeName === 'eqp'" :eqpDetailData="eqpDetailData" />
    <EquipParams v-if="activeName === 'params'" :activeName="activeName" :eqpId="props.eqpId" />
    <!-- <equipStats v-if="activeName === 'stats'" type="detail" :eqpId="props.eqpId" /> -->
    <!-- <EqpPID v-if="activeName === 'pid'" type="detail" :activeName="activeName" :eqpDetailData="eqpDetailData" /> -->
    <EquipGuide v-if="activeName === 'guide'" type="detail" :activeName="activeName" :eqpDetailData="eqpDetailData" />
    <EquipSOP v-if="activeName === 'sop'" type="detail" :activeName="activeName" :eqpDetailData="eqpDetailData" />
    <EquipImg v-if="activeName === 'img'" type="detail" :activeName="activeName" :eqpDetailData="eqpDetailData" />
    <EquipSpares v-if="activeName === 'spares'" type="detail" :activeName="activeName" :eqpId="props.eqpId" />
    <EquipInstrument v-if="activeName === 'instrument'" type="view" :activeName="activeName" :eqpDetailData="eqpDetailData" />
    <EquipHistory
      v-if="activeName === 'changeHistory'"
      type="view"
      :activeName="activeName"
      :eqpDetailData="eqpDetailData"
      @backMainPage="emits('backMainPage')"
    />
  </px-scrollbar>
</template>
<script setup lang="ts">
import { queryEqpById } from "@/api/equip/archive";
import CustomTabs from "@/components/Tabs/index.vue";
import { reactive, toRefs, watchEffect } from "vue";
import equipBaseInfo from "./equipBaseInfo.vue";
import EquipGuide from "./EquipGuide.vue";
import EquipHistory from "./EquipHistory.vue";
import EquipImg from "./EquipImg.vue";
import EquipInstrument from "./EquipInstrument.vue";
import EquipParams from "./EquipParams.vue";
import EquipSOP from "./EquipSOP.vue";
import EquipSpares from "./EquipSpares.vue";

// 调用父级-返回主页、查询列表方法
const emits = defineEmits(["backMainPage"]);
// 父级传过来的值
const props = defineProps(["drawerType", "eqpId", "tab"]);
const state = reactive<any>({
  eqpDetailData: {},
  activeName: "eqp",
  tabList: [
    {
      name: "eqp",
      label: "设备信息"
    },
    {
      name: "params",
      label: "设备参数"
    },
    // {
    //   name: "stats",
    //   label: "设备属性"
    // },
    // {
    //   name: "pid",
    //   label: "设备PID图"
    // },
    {
      name: "guide",
      label: "设备手册"
    },
    {
      name: "sop",
      label: "故障处理SOP"
    },
    {
      name: "img",
      label: "设备图纸"
    },
    {
      name: "spares",
      label: "备品备件"
    },
    {
      name: "instrument",
      label: "附属设备/附件"
    },
    {
      name: "changeHistory",
      label: "变更历史"
    }
  ]
});
const { activeName, eqpDetailData, tabList } = toRefs(state);

const handelTabSelected = selectName => {
  activeName.value = selectName;
};

// 显示隐藏
// const isMain = computed(() => props.isMain);
// const isView = computed(() => props.isView);

watchEffect(async () => {
  if (props.drawerType === "DETAIL") {
    if (props.tab) {
      handelTabSelected(props.tab);
    } else {
      handelTabSelected("eqp");
    }
    const data = await queryEqpById({ eqpId: props.eqpId });
    const { pictureList, categoryName } = data;
    eqpDetailData.value = { ...data, pictureList: pictureList || [], categoryName: categoryName || "无" };
  }
});

// // 监视isMain和isView值
// watch(isMain, async val => {
//   if (!val && props.isView) {
//   }
// });
// 返回主页面
const backMainPage = () => {
  eqpDetailData.value = {};
  activeName.value = "eqp";
  emits("backMainPage");
};
</script>
<style lang="scss" scoped>
.flex-row {
  display: flex;
  align-items: center;
}

.page-header {
  margin-left: 16px;
  font-size: 16px;
  font-weight: 700;
  color: #000;
}
</style>
<style lang="scss" scoped>
@import url("@/views/all/equip/scss/view-detail.scss");
</style>
